<template>
  <el-card>
    <div slot="header" style="line-height: 40px;">
      <h1>添加宿舍管理员</h1>
    </div>
    <el-form ref="dormsForm" :rules="rules" label-width="80px" :model="dormsForm">
      <el-form-item label="ID" v-show="false">
        <el-input v-model="dormsForm.id"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="cname">
        <el-input v-model.trim="dormsForm.cname"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="intro">
        <el-input v-model.trim="dormsForm.intro"></el-input>
      </el-form-item>
      <el-form-item label="管理员" prop="dormAdmins">
        <el-transfer v-model="admins" :data="adminNames"></el-transfer>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import dormsApi from "@/http/dormsApi";
  import dormAdminApi from '@/http/dormAdminApi'
  export default {
    name: "Add",
    created() {
        this.getEditObj();
      dormAdminApi.findUsernames().then(res => {
        console.log(res);
        if (res.data.code == 200) {
          res.data.data.forEach(item => {
            this.adminNames.push({
              key: item.username,
              label: `${ item.username }`
            });

          })
        }
      })
    },
    data() {
      return {
        admins: [],
        adminNames: [],
        dormsForm: {},
        rules: {
          cname: [{
            required: true,
            message: '请输入宿舍楼名称',
            trigger: 'blur'
          }, ],
          intro: [{
            required: true,
            message: '请输入宿舍楼简介',
            trigger: 'blur'
          }, ],
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs['dormsForm'].validate((valid) => {
          if (valid) {
              this.dormsForm.dormAdmins = this.admins.join(",");
            dormsApi.save(this.dormsForm).then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.$router.replace("/dorms.html")
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false; //阻止表单提交
          }
        });
      },
      onReset() {
        this.$refs["dormsForm"].resetFields();
      },
      getEditObj() {
        let id = this.$route.params.id;
        if (id) {
          dormsApi.edit(id).then(res => {
            if (res.data.code == 200) {
              this.dormsForm = res.data.data;
               this.admins = this.dormsForm.dormAdmins.split(",");
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>